<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>赌我会瘦</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current bet-rule-page bg-light-gray">
      <header class="bar bar-nav fb-header has-img-header" style="background: #eee;">
        <a href="${ctx.host}/mall" class="pull-left logo"> <img src="${ctx.resource}/images/rule-header-left.png">
        </a>
        <h1 class="title">
          <img src="${ctx.resource}/images/rule-header-title-black.png">
        </h1>
        <a href="${ctx.host}/profile" class="pull-right user-cover"> <img src="${user.avatar}">
        </a>
      </header>

      <%-- <div class="bar bar-footer fb-footer">
        <a href="${ctx.host}/index" class="button button-big fb-button">我也要参与挑战</a>
      </div> --%>

      <div class="content">
        <div class="content-padded challenger-info">
          <div class="challenger-cover">
            <%-- <img src="${ctx.resource}/images/index-activity-cover.png" alt="" class="img-style"> --%>
            <div class="bet-title">
              ${userBet.user.nickname}的${userBet.bet.name}
              <p class="no-margin">
                <fmt:formatDate value="${userBet.bet.startDate}" pattern="yyyy.MM.dd" />
                -
                <fmt:formatDate value="${userBet.bet.endDate}" pattern="yyyy.MM.dd" />
              </p>
              
              <div class="deadline-text">距离挑战结束</div>
              <div class="deadline clearfix flipclock" data-end="${userBet.bet.endDateString}">
                <c:set var="restDays" value="${userBet.bet.restDays}"></c:set>
		            <!--<div class="section" data-section="year">year</div>-->
		            <div class="item section" data-section="day">DAYS</div>
		            <div class="item section" data-section="hour">HOURS</div>
		            <div class="item section" data-section="minute">MINUTES</div>
		            <div class="item section" data-section="second">SECONDS</div>
              </div>
              <%-- <div class="deadline clearfix">
                <c:set var="restDays" value="${userBet.bet.restDays}"></c:set>
                <div class="item">
                  <div class="number">
                    ${restDays[0]}
                  </div>
                  <div>DAYS</div>
                </div>
                <div class="item">
                  <div class="number">${restDays[1]}</div>
                  <div>HOURS</div>
                </div>
                <div class="item">
                  <div class="number">${restDays[2]}</div>
                  <div>MINUTES</div>
                </div>
              </div> --%>
            </div>

            <!--  <div class="share">
              <i class="iconfont icon-share" style="font-size: 1.3rem; display: block; line-height: 1;"></i>分享
            </div> 
            <div class="user-cover">
              <img src="${userBet.user.avatar}" alt="">
            </div> -->

          </div>
        </div>
        <div class="bonus content-padded" style="">
          
          <c:choose>
            <c:when test="${not empty userBetSupport && (userBetSupport.status eq 'PAID' || userBetSupport.status eq 'FINISHED')}">
              <c:if test="${userBetSupport.support}">
                <div class="support-button-layout clearfix">
                <a href="javascript:void(0);" style="margin-left: 25%;" class="button support-button active"><img src="${ctx.resource}/images/likes.png" style="display: inline-block; width: 1rem; margin-right: .25rem; vertical-align: middle;">看好</a>
                </div>
              </c:if>
              <c:if test="${!userBetSupport.support}">
                <div class="support-button-layout clearfix">
                <a href="javascript:void(0);" style="margin-left: 25%;" class="button support-button nonsupport-button disabled"><img src="${ctx.resource}/images/dislike.png" style="display: inline-block; width: 1rem; margin-right: .25rem; vertical-align: middle;">不看好</a>
                </div>
              </c:if>
            </c:when>
            <c:otherwise>
              <div class="support-button-layout clearfix">
                <a href="${ctx.host}/shopping/prepare?id=${userBet.id}&support=true&type=support" class="button support-button active"><img src="${ctx.resource}/images/likes.png" style="display: inline-block; width: 1rem; margin-right: .25rem; vertical-align: middle;">看好</a> 
                <a href="${ctx.host}/shopping/prepare?id=${userBet.id}&support=false&type=support" class="button support-button nonsupport-button disabled"><img src="${ctx.resource}/images/dislike.png" style="display: inline-block; width: 1rem; margin-right: .25rem; vertical-align: middle;">不看好</a>
              </div>
            </c:otherwise>
          </c:choose>
          
          
          <div class="activity-bonus">
            <div class=" text-center number">
              <img src="${ctx.resource}/images/bonus.png" style="display: inline-block; height: 1.2rem; vertical-align: middle;" />
              <div class="people-number" style="display: inline-block;">
                <c:forEach var="thumbAmountSplitItem" items="${userBet.supportSplit}">
                  <span class="item">${thumbAmountSplitItem}</span>
                </c:forEach>
              </div>
              人参与
            </div>
            <div class="text-center">
              <div class="price clearfix">
                <span class="item">￥</span>
                <c:forEach var="bonusSplitItem" items="${userBet.bonusSplit}">
                  <span class="item">${bonusSplitItem}</span>
                </c:forEach>
              </div>
            </div>
          </div>
          <%-- <img src="${ctx.resource}/images/interval.png" class="img-style" alt="" /> --%>
          
          <div class="progress">
            <div class="progress-text clearfix">
              <div class="pull-left">看好${userBet.thumbup}</div>
              <div style="position: absolute; left: 50%;">vs</div>
              <div class="pull-right">不看好${userBet.thumbdown}</div>
            </div>
            <div class="progress-bar">
              <div class="progress-bg" style="width: ${userBet.percent}%;"></div>
            </div>
          </div>

          <div class="supporter-layout">
            <c:forEach var="support" items="${supports}" varStatus="status">
              <c:if test="${support.status eq 'PAID' || support.status eq 'FINISHED'}">
                <div class="supporter-box">
                  <img src="${support.user.avatar}" class="user-cover"> 
                  <div class="content-item">
                    <span style="font-size: .7rem;">${support.user.nickname}</span> <span class="color-red" style="font-size: .7rem;">${support.support ? '看好' : '不看好'}
                    <fmt:formatNumber value="${support.price/ 100}" pattern="0"></fmt:formatNumber>
                    </span>
                  </div>
                </div>
              </c:if>
            </c:forEach>
          </div>
          
        </div>
        <div class="rule-layout">
          <div style="margin-top: 1rem;">
            <div class="activity-introduction-title">活动说明</div>
            <img src="${ctx.resource}/images/bet-step.png" style="display: block; margin: .25rem 0 .5rem; max-width: 100%; width: 100%;">
          </div>
          <div class="main">
            <div class="block-title text-center">基本规则</div>
            <div class="description">挑战者邀请好友竞猜，数量不限。竞猜者不直接参与比赛，没有减重的要求。每位竞猜者需支付100元竞猜金。</div>
            <div class="description" style="margin: .75rem 0;">参赛者减重挑战结束，竞猜者瓜分奖金池。</div>
            <%-- <div class="text-center open-more">
              <img src="${ctx.resource}/images/down-arrow.png" style="display: block; width: 1.05rem; margin: 0 auto .25rem;">展开
            </div> --%>
          </div>

          <div class="video-layout">
            <div class="video-header">
              <div style="font-size: .7rem; color: #d11b28; margin-bottom: .25rem;">${userBet.user.nickname}初始体重</div>
              <div>${userBet.beforeWeight}<span style="font-size: .9rem; font-weight: 500;">kg</span>
              </div>
            </div>
            <div class="video-content">
              <c:if test="${not empty userBet.beforeVedio}">
                <div id="uploadVideo" style="width: 100%; height: 11rem;" data-video="${userBet.beforeVedio}">
                </div>
              </c:if>
              <c:if test="${empty userBet.beforeVedio}">
                <img src="${ctx.resource}/images/bet-video.png" style="width: 100%; display: block;" alt="">
              </c:if>
            </div>
          </div>
          <%-- <c:if test="${not empty userBet.afterWeight}">
            <div class="video-layout">
              <div class="video-header" style="padding-top: 0;">
                <span style="font-size: .7rem; color: #999;">活动后体重</span><br>${userBet.afterWeight}<span style="font-size: .9rem; font-weight: 500;">kg</span>
              </div>
              <div class="video-content">
                <c:if test="${not empty userBet.afterVedio}">
                  <div id="uploadAfterVideo" style="width: 100%; height: 11rem;" data-video="${userBet.afterVedio}"></div>
                </c:if>
                <c:if test="${empty userBet.afterVedio}">
                  <img src="${ctx.resource}/images/bet-video.png" style="width: 100%; display: block;" alt="">
                </c:if>
              </div>
            </div>
          </c:if> --%>
          <div class="video-layout no-shadow">
            <div class="video-header has-border-header">
              <div style="font-size: .7rem; color: #d11b28; margin-bottom: .25rem;">${userBet.user.nickname}成果体重</div>
              <div>??<span style="font-size: .9rem; font-weight: 500;">kg</span></div>
              <div style="position: absolute; right: 1rem; top: 2rem; font-size: 1rem; font-weight: 400; color: #d11b28;">待揭晓</div>
            </div>
            <div class="video-content">
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <c:if test="${userBet.user.id != user.id}">
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/cmomon.js" />
  <script type="text/javascript">
    require(['page/common'], function(page) {
      page.init({
        "jsConfig": JSON.parse('${jsConfig}'),
        "avatar": '${user.avatar}',
        "userName": '${userBet.user.nickname}'
      })
    })
  </script>
  </c:if>
  <c:if test="${userBet.user.id == user.id}">
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/cmomon.js" />
  <script type="text/javascript">
      require(['page/common'], function(page) {
        page.init({
          "jsConfig": JSON.parse('${jsConfig}'),
          "avatar": '${user.avatar}',
          "url": window.__CTX__.domain + "/users/" + "${user.id}" + "/bets/"
                  + "${userBet.bet.id}" + "/share",
          "status": '${userBet.status}',
          "userName": '${userBet.user.nickname}',
          "endDate": "${userBet.bet.endDate}"
        })
      })
    </script>
  </c:if>
</body>
</html>